<template>
  <div class="box">
    <div class="w1300">
      <div class="flex-xbt" style="margin-bottom: 10px">
        <h2 style="font-size: 32px; color: #333; font-weight: bold">成员</h2>
        <el-button type="primary" @click="onAddBlog">添加博客</el-button>
      </div>
    </div>

    <div class="w1300 flex">
      <div class="content-wrap">
        <news
          v-for="item in 8"
          :key="item"
          :isRead="false"
          @onEdit="onEdit"
          @onDelete="onDelete"
        ></news>
      </div>
    </div>

    <dialog-comp
      title="添加成员"
      width="500"
      v-model="isAddBolg"
      @onSubmit="onAddMemberSubmit"
    >
      <form-comp
        labelWidth="40"
        :form-item="bolgFormItem"
        v-model:formData="bolgAddData"
      ></form-comp>
    </dialog-comp>
  </div>
</template>

<script setup lang="ts">
import News from '@/pages/topic/components/news.vue'
import DialogComp from '@/components/dialog/index.vue'
import FormComp from '@/components/form/form.vue'
import { useAddBlog } from '@/pages/topic/views/blog/addBlog.ts'
import { ref } from 'vue'
import { MsgConfirmAsync, MsgSuccess } from '@/utils/utils.ts'

const { bolgFormItem, bolgAddData } = useAddBlog()

const isAddBolg = ref(false)
const onAddBlog = () => {
  isAddBolg.value = true
}
const onEdit = () => {
  isAddBolg.value = true
}
const onDelete = async () => {
  const flag = await MsgConfirmAsync('你确定删除吗?')
  if (flag) {
    MsgSuccess('删除成功')
  }
}
</script>

<style scoped lang="scss">
.box {
  background-color: #f8f8f8;
  padding-top: 55px;
}
.w1300 {
  .search-wrap {
    padding-right: 50px;
  }
  .content-wrap {
    flex: 3;
  }
}
</style>
